<template>
  <div class="home">
    <h1 class="header">WISDOM社区系统</h1>
    <div>
      <template v-if="isLogin">
        <span class="user">您好,{{resident.name}}</span>
      </template>
      <el-menu  class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="handleHome">首页</el-menu-item>
        <el-menu-item index="2" @click="handleMyself">个人信息</el-menu-item>
        <el-submenu index="3">
          <template slot="title">设备报修</template>
          <el-menu-item index="3-1" @click="handleRapir">住户保修</el-menu-item>
          <el-menu-item index="3-2"  @click="handleRapirRecord">报修记录</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">关于环境</template>
          <el-menu-item index="4-1">投诉</el-menu-item>
          <el-menu-item index="4-2">建议</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">车位信息</template>
          <el-menu-item index="5-1" @click="handleCar">车位添加</el-menu-item>
          <el-menu-item index="5-2" @click="handleParking">车位更新</el-menu-item>
        </el-submenu>

        <el-menu-item index="4" @click="handleClick">{{message}}</el-menu-item>
      </el-menu>

    </div>
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      message:'登录',
      token:'',
      isLogin:false,
      resident:{
       name:'',
        id:0,
      },
    };
  },
  created() {
    this.handleResident();
  },
  methods: {
    handleResident(){
      if (localStorage.getItem("webToken")!=null||localStorage.getItem("webToken")!=""){
          this.token = localStorage.getItem("webToken");
          this.message="退出";
          this.resident=JSON.parse(localStorage.getItem("resident"));
          // console.log(localStorage.getItem("token"))
          this.isLogin=true;
      }
      if (localStorage.getItem("webToken")==null||localStorage.getItem("webToken")==""){
        this.message="登录";
        this.isLogin=false;
      }
    },
    handleClick(){
      if(this.isLogin=true||this.message=="退出"){
        localStorage.removeItem("webToken");
        localStorage.removeItem("resident");
        this.resident={};
        this.token='';
        this.isLogin=false;
        this.message="登录";
        // this.$router.push("/web/login");
      }
      if (this.isLogin=false||this.message=="登录"){
        this.handleResident();
        this.$router.push("/web/login");
      }
    },
    handleMyself(){
      this.$router.push("/web/myself");
    },
    handleRapir(){
      this.$router.push("/web/rapair");
    },
    handleRapirRecord(){
      this.$router.push("/web/rapairRecord");
    },
    handleHome(){
      this.$router.push({name:'webHome'});
    },
    handleCaradd() {
      this.$router.push("/web/add");
    },
    handleUpdate() {
      this.$router.push("/web/update");
    },
    handleCar(){
      this.$router.push("/web/car");
    },

}

}
</script>
<style scoped>
.home{
  height: 100%;
  width: 100%;
}
 .header{
   background-image: url("@/assets/logoW.png");
   background-size: 160px;
   background-repeat: no-repeat;
 }

</style>

